import { observer } from "mobx-react-lite";
import { ChangeEvent, FormEvent, useContext, useState } from "react";
import { useRootStore } from "../store/store";

function TodoList() {
  const { todoStore } = useRootStore();
  const [newTodo, setNewTodo] = useState("");

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setNewTodo(e.target.value);
  };

  const handleFormSubmit = (e: FormEvent) => {
    e.preventDefault();
    todoStore.addTodo(newTodo);
    setNewTodo("");
  };

  return (
    <div>
      <h1>Todo1</h1>
      <form onSubmit={handleFormSubmit}>
        <input type="text" value={newTodo} onChange={handleInputChange} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todoStore.todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      {todoStore.todoCount > 0 && <div>Total todos: {todoStore.todoCount}</div>}
    </div>
  );
}

export default observer(TodoList);
